<template>
  <div class="article-list">
    <!-- 下拉刷新组件 -->
    <van-pull-refresh v-model="isLoading"
                      :success-text="successText"
                      @refresh="onRefresh">
      <!-- 文章列表组件 -->
      <!-- v-model绑定的是加载中的变量 -->
      <!-- finished属性表示，整个列表数据是否加载完成 -->
      <!-- 自定义事件load
      1.页面一打开就会自动触发自定义事件load，直到内容铺满页面位置
      2.当页面滚动到底部的时候也会再次触发load事件
     -->
      <van-list v-model="loading"
                :error.sync="error"
                error-text="请求失败，点击重新加载"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad">
        <!-- 文字列表项组件 -->
        <article-item v-for="(item,index) in list"
                      :article-info="item"
                      :key="index"></article-item>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getArticles } from '@/api/channels'
import ArticleItem from '@/components/article-item'
export default {
  name: 'ArticleList',
  components: {
    ArticleItem
  },
  props: {
    // 当前的频道信息
    channel: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      list: [], // 数据列表
      loading: false, // 是否处于加载中
      finished: false, // 整个文章列表数据是否加载完成
      error: false, // 是否出错
      timestamp: Date.now(), // 时间戳
      isLoading: false, // 是否处于下拉加载中
      successText: '' // 成功刷新的文案
    }
  },
  methods: {
    async onLoad () {
      try {
        // 测试代码
        // if (Math.random() * 10 > 5) {
        //   console.log(JSON.parse('aaa'))
        // }
        // 1.发送数据请求
        const { data: res } = await getArticles({
          channel_id: this.channel.id, // 频道ID
          timestamp: this.timestamp, // 时间戳
          with_top: 1 // 是否包含置顶，1是，0 否
        })
        // 4.成功处理
        // 将数据追加到列表，让列表越来越长
        this.list = [...this.list, ...res.data.results] // 列表数据
        this.timestamp = res.data.pre_timestamp // 下一页的时间戳（本质就是页码）
        // 判断是否结束
        if (res.data.results.length < 10) {
          this.finished = true
        }
      } catch (error) {
        // 2.错误处理
        this.error = true // 显示错误
        console.dir(error)
        this.$toast.fail('获取文章列表失败')
      }
      // 3.加载中关闭(无论成功失败都要关闭)
      this.loading = false
    },
    // 下拉刷新事件
    async onRefresh () {
      // 获取最新的数据，追加到列表的顶部
      try {
        // 1.发送请求
        const { data: res } = await getArticles({
          channel_id: this.channel.id, // 频道ID
          timestamp: Date.now(), // 最新时间戳
          with_top: 1 // 是否包含置顶，1是，0 否
        })
        // 3.成功处理
        // 将最新的数据放入到列表的顶部
        this.list = [...res.data.results, ...this.list] // 列表数据
        this.successText = `成功为你刷新${res.data.results.length}条数据`
      } catch (error) {
        // 2.错误处理
        console.dir(error)
        this.$toast.fail('刷新出错')
      }
      // 加载中关闭
      this.isLoading = false
    }
  }
}

// 总结：
// 1. van-list 组件
// 【属性介绍】
// v-model 捆绑 loading变量表示是否加载中
// finished 属性捆绑finished变量表示是否加载结束
// 【load自定义事件】
// ====>1. 自动触发（页码进入就触发），直到内容铺满为止就不再触发
// ====>2. 滚动到了底部会再次触发
// load绑定的事件函数里面
// ====>1. 发送请求
// ====>2. 错误处理
// ====>3. 关闭加载中(无论成功还是失败都要执行的)
// ====>4. 成功处理
// ========>a. 加工数据(如果数据不符合要求，就要加工处理)
// ========>b. 将数据追加给列表(不是赋值，因为要让列表越来越长，数组要越来越大)
// ========>c. 页码处理
// ========>d. 判断是否结束
</script>

<style scoped lang="less">
.article-list{
  overflow-y: scroll;
  height: 79vh;
}
</style>
